/*
 * 背景元素
 * 
 */

var ElementBase = require("./ElementBase.js");

function ElementBg() {
	//继承基类
	ElementBase.apply(this, arguments);

	this.type = "bg";
	this.url = "";

	this._repeat = false;
	this.rectPath = null;
	this.rectBgColorPath = null;
	this.elefill = null;
	this._marginx = 0;
	this._marginy = 0;
	this._w = 1;
	this._h = 1;
	this._bgColor = "";
	
	this.base64Url = "";

	Object.defineProperty(this, "repeat", {
		get: function() {
			return this._repeat;
		},
		set: function(value) {
			var self = this;
			this._repeat = value;
			this.update();
		},
		configurable: true
	});

	Object.defineProperty(this, "marginx", {
		get: function() {
			return this._marginx;
		},
		set: function(value) {
			this._marginx = value;
			this.update();
		}
	});

	Object.defineProperty(this, "marginy", {
		get: function() {
			return this._marginy;
		},
		set: function(value) {
			this._marginy = value;
			this.update();
		}
	});

}

ElementBg.prototype = new ElementBase();

ElementBg.prototype.update = function() {
	var self = this;
	if (!this.rectPath) {
		var product = this.face.product;
		if (product) {
			var editBounds = product.getEditeRect();
			var x = editBounds.x;
			var y = editBounds.y;
			var w = editBounds.width;
			var h = editBounds.height;
			this.rectBgColorPath = Design.paper.rect(x, y, w, h);
			this.rectBgColorPath.attr("displayType","bg-color");
			this.rectPath = Design.paper.rect(x, y, w, h);
			this.rectPath.attr("displayType","bg-repeat");
			$(this.rectPath.node).on("mousedown", function(e) {
				self.select();
			});
		}
		
		self.bglayer();
	}
	var spacex = this.marginx;
	var spacey = this.marginy;
	if (this.repeat && this.element.matrix) {
		var splits = this.element.matrix.split();
		var w = this._w * splits.scalex;
		var h = this._h * splits.scaley;
		var ow = w + spacex;
		var oh = h + spacey;
		var attrobj = {
			"x": splits.dx,
			"y": splits.dy,
			"width": ow,
			"height": oh,
			"patternTransform": "rotate(" + splits.rotate + ")",
			"viewBox": "0 0 " + ow + " " + oh
		}
		if(self.base64Url){
			if (!self.elefill && self.base64Url) {
				self.elefill = Design.paper.image(self.base64Url).pattern(0, 0, w, h);
				self.rectPath.attr({
					fill: self.elefill
				});
			}
			self.elefill.attr(attrobj);
			setTimeout(function(){
				self.elefill.children()[0].attr({
					"width": w,
					"height": h
				});
			})
		}
	} else {
		this.rectPath.attr({
			fill: "none"
		});
		this.elefill = null;
	}

	if (this.bgColor) {
		this.rectBgColorPath.attr({
			fill: this.bgColor
		});
	} else {
		this.rectBgColorPath.attr({
			fill: "none"
		});
	}
}

/*
 * 设置图片信息
 */
ElementBg.prototype.setJson = function($data) {
	var self = this;
	this.super_setJson($data);
	if ($data.url && ($data.url != self.url)) {
		self.url = $data.url;
		self.loadImg($data.url, function(img, base64) {
			if (self.isdestroy) return;
			if(self.element) {
				self.element.remove();
			}
			self.element = Design.paper.image(base64);
			self.base64Url = base64;
			self._w = img.width;
			self._h = img.height;
			if ($data.marginx) {
				self._marginx = $data.marginx;
			}
			if ($data.marginy) {
				self._marginy = $data.marginy;
			}
			self.repeat = $data.repeat ? true : false;
			self.appendToCon();
			self.update();
			self.bglayer();
			self.createEnd();
		});
	} 
	
	if ($data.bgColor) {
		self.bgColor = $data.bgColor;
		self.update();
		self.bglayer();
	}
}

ElementBg.prototype.appendToCon = function() {
	if(this.face) {
		if(this.rectBgColorPath){
			this.rectBgColorPath.appendTo(this.face.eleCon);
		}
		if(this.rectPath){
			this.rectPath.appendTo(this.face.eleCon);
		}
		if(this.element){
			this.element.appendTo(this.face.eleCon);
			this.element.node.setAttribute("displayType", "Element");
			this.element.transform(this.matrix);
		}
	}
}

/*
 * 获取保存的数据
 */
ElementBg.prototype.getSaveData = function() {
	var json = this.super_getSaveData();
	json.url = this.url;
	json.bgColor = this.bgColor;
	json.repeat = this.repeat;
	json.marginx = this.marginx;
	json.marginy = this.marginy;
	return json;
}

/*
 * 隐藏
 */
ElementBg.prototype.hide = function() {
	if (this.element) {
		this.element.attr("display", "none");
	}
	if (this.rectPath) {
		this.rectPath.attr("display", "none");
	}
	if (this.rectBgColorPath) {
		this.rectBgColorPath.attr("display", "none");
	}
}

/*
 * 显示
 */
ElementBg.prototype.show = function() {
	if (this.element) {
		this.element.attr("display", "");
	}
	if (this.rectPath) {
		this.rectPath.attr("display", "");
	}
	if (this.rectBgColorPath) {
		this.rectBgColorPath.attr("display", "");
	}
}

//销毁
ElementBg.prototype.destroy = function() {
	this.isdestroy = true;
	var currele = Design.tool.getTarget();
	if (this == currele) {
		Design.tool.setTarget(null);
	}
	this.unselect();
	if (this.element) {
		this.element.remove();
		this.element = null;
	}
	if (this.rectPath) {
		this.rectPath.remove();
		this.rectPath = null;
	}
	if (this.rectBgColorPath) {
		this.rectBgColorPath.remove();
		this.rectBgColorPath = null;
	}
}


ElementBg.prototype.getIcon = function() {
	return '<img alt="" src="' + this.url + '"><span>背景</span>';
}

exports = module.exports = ElementBg;
